iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
0
Modern Web

重新學習網頁設計系列 第 21

DAY 21. Three.js 載入器 Loader

  • 分享至 

  • xImage
  •  

DAY 21. Three.js 載入器 Loader

雖然Three提供了很多Geometory供我們使用,但真實世界的需求當然不可能那麼簡單,我們很有可能需要使用更特殊的3D模組,因此我們必須要能夠載入它們到我們3D場景之中。

Three有很提供各種3D格式的載入器,而預設的載入器用來載入json格式的模組。
3D檔案格式中並沒有包含json,這裡所用的json檔是Three作者所提供的add-on
我們能夠在ThreeGithub中找到, 作者提供兩種版本供我們使用

照著文件中的流程先將add-on安裝到軟體之中後,之後在軟體中打開3D模組,最後將模組以json格式匯出,接著這個json就能夠被Three預設的Loader的所使用。

如果你沒有使用過3D軟體的經驗,個人建議使用Blender,它不僅免費,而且跨平台。

載入器 Loader


/*
 | 建構式
 */
const loader = new THREE.Loader()

/*
 | 屬性
 */
loader.onLoadStart = function () {
    // 載入開始時觸發, 預設值為空function.
}

loader.onLoadProgress = function (xhr) {
    // 進度更新時觸發, 預設值為空function.
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}

loader.onLoadComplete = function () {
    // 載入完成時觸發, 預設值為空function.
}

loader.crossOrigin = 'doamin.com'   // 當模組來源跨域時需設定其網域名稱。

/*
 | 實際載入範例
 | 參數 moduleSrc: json檔來源
 | 回傳 geometory: 3D模組
 */
loader.load(moduleSrc, geom => {
    const material = new THREE.MeshNormalMaterial() 
    const mesh = new THREE.Mesh(geom, material)
    // scene.add(mesh)
})

載入器Loader使用方式就這麼簡單,記得最後結果加入場景後要render場景。
另外其他非預設的載入器可以在Three.js/Loaders中找到。

非預設Loader 範例

<!--
    HTML 載入 three.js與 Loader, 這裡以 OBJLoader為範例
-->
<script src="/js/three/three.js"></script>
<script src="/js/three/OBJLoader.js"></script>
/*
 | 建構式
 */
const OBJLoader = new THREE.OBJLoader()

// .... 略

Loader的使用方式大致都相同,因此不再贅述。
更多細節的使用請參照Three.js#Loader


上一篇
DAY 20. Three.js 紋理 Texture
下一篇
DAY 22. Three.js 總結
系列文
重新學習網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言